<template>
  <div>
    <el-form class="jc_search_wrap" v-model="searchList">
      <!-- <label>发料时间:</label>
      <el-date-picker v-model="searchList.date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                      end-placeholder="结束日期"></el-date-picker> -->
        <label style="width:100px">发料开始时间:</label>
              <el-date-picker
                v-model="startDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
              <label style="width:100px">发料结束时间:</label>
              <el-date-picker
                v-model="endDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>

      <label>刀号：</label>
      <el-input v-model="searchList.input" placeholder="请输入内容"></el-input>
      <el-button @click="searchRows"><i class="el-icon-search"></i> 查询</el-button>
    </el-form>
    <div class="top_table">
      <div class="t_title">
        <div></div>
        <div>发料单晶</div>
        <div>粘棒数</div>
        <div>线切单晶</div>
        <div>脱胶单晶</div>
        <div>插片单晶</div>
        <div>清洗数</div>
        <div>机检数</div>
        <div>人检数</div>
      </div>
      <div class="content">
        <div>合计</div>
        <div>{{msg["发料单晶"]}}</div>
        <div>{{msg["粘棒数"]}}</div>
        <div>{{msg["线切单晶"]}}</div>
        <div>{{msg["脱胶单晶"]}}</div>
        <div>{{msg["插片单晶"]}}</div>
        <div>{{msg["清洗数"]}}</div>
        <div>{{msg["机检数"]}}</div>
        <div>{{msg["人检数"]}}</div>
      </div>
    </div>
    <el-table :height="tableHeight" :data="list" border fit highlight-current-row class="jc_table_wrap"
              @selection-change="handleSelectionChange" ref="multipleTable">
      <!--      <el-table-column type="index"  width="50">
                </el-table-column> -->
      <el-table-column type="selection" width="55" fixed></el-table-column>
      <el-table-column label="操作" fixed width="80">
        <template scope="scope">
          <keep-alive>
            <el-button size="mini" @click="handleInfo(scope.$index, scope.row)">详情</el-button>
          </keep-alive>
        </template>
      </el-table-column>
      <el-table-column label="单晶编号" width="220">
        <template scope="scope">{{scope.row["单晶编号"]}}</template>
      </el-table-column>

      <el-table-column label="刀号" width="120">
        <template scope="scope">{{scope.row["刀号"]}}</template>
      </el-table-column>
      <el-table-column label="发料时间" width="160">
        <template scope="scope">{{scope.row["发料时间"]}}</template>
      </el-table-column>

      <el-table-column label="粘棒" width="160">
        <template scope="scope">
          <div>{{scope.row["粘棒上料时间"]}}</div>
          <div>{{scope.row["粘棒下料时间"]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="线切" width="160">
        <template scope="scope">
          <div>{{scope.row["线切上料时间"]}}</div>
          <div>{{scope.row["线切下料时间"]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="脱胶" width="160">
        <template scope="scope">
          <div>{{scope.row["脱胶上料时间"]}}</div>
          <div>{{scope.row["脱胶下料时间"]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="插片" width="160">
        <template scope="scope">
          <div>{{scope.row["插片时间"]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="清洗" width="160">
        <template scope="scope">
          <div>{{scope.row["清洗时间"]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="机检" width="160">
        <template scope="scope">{{scope.row["机检时间"]}}</template>
      </el-table-column>
      <el-table-column label="人检" width="160">
        <template scope="scope">{{scope.row["人检时间"]}}</template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="changePage"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog :visible.sync="dialogVisible" fullscreen title="加工流程卡" >
      <table class="jc_table">
          <tr>
            <th rowspan="6" width="10%">方棒信息</th>
            <td colspan="6" style="text-align: center;">粘棒工序填写</td>
          </tr>
          <tr v-for="item in lailiaoList">
            <td width="10%">单晶编号</td>
            <td width="10%">{{item.crystalNo}}</td>
            <td width="10%">棒长(mm)</td>
            <td width="10%">{{item.crystalLength}}</td>
            <td width="12%">领料已崩或切断长度(mm)</td>
            <td width="10%">{{item.chipLength}}</td>
          </tr>
          <tr>
            <td colspan="6" style="text-align: center;">理论出片数 = ( 方棒长度 - 拼棒段数 * 3 - 领料已崩或切断长度 ) / 槽轮系数</td>
          </tr>
        </table>
      <!--粘棒-->
      <table class="jc_table" v-model="zhangbangList">
        <tr>
          <th rowspan="4" width="100">粘棒</th>
          <td width="200">树脂板厂家/颜色</td>
          <td>{{zhangbangList.manufacturers}} {{zhangbangList.colour}}</td>
          <td rowspan="2" width="200">粘树脂板员/时间</td>
          <td rowspan="2">{{zhangbangList.resinName}} {{zhangbangList.resinDate}}</td>
          <td rowspan="2" width="200">上料员/时间</td>
          <td rowspan="2">{{zhangbangList.chargeName}} {{zhangbangList.chargeDate}}</td>
          <td width="200">机台号</td>
          <td>{{zhangbangList.machineNo}}</td>
        </tr>
        <tr>
          <td width="200">单晶粘接温度</td>
          <td width="200">{{zhangbangList.temperature}}</td>
          <td width="200">料座号</td>
          <td width="200">{{zhangbangList.liaozuoNo}}</td>
        </tr>
        <tr>
          <td width="200">下料员</td>
          <td width="200">{{zhangbangList.unloadName}}</td>
          <td width="200">去胶员/时间</td>
          <td width="200">{{zhangbangList.degummingName}} {{zhangbangList.degummingDate}}</td>
          <td width="200">崩损(mm)/崩损人</td>
          <td width="200">{{zhangbangList.damageCondition}}</td>
          <td width="200">粘棒员/时间(人工粘棒时填写)</td>
          <td width="200">{{zhangbangList.stickName }} {{zhangbangList.stickDate }}</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="3">{{zhangbangList.description}}</td>
          <td>总棒长(mm)</td>
          <td colspan="3">{{zhangbangList.stickLength}} </td>
        </tr>
      </table>
      <!--线切-->
      <table class="jc_table" v-model="xianqieList">
        <tr>
          <th rowspan="10" width="100">线切</th>
          <td width="200">领料员/时间</td>
          <td>{{xianqieList.lingliaoName}} {{xianqieList.lingliaoDate}}</td>
          <td width="200">机台号</td>
          <td colspan="2">{{xianqieList.machineNo}}</td>
          <td width="200">理论出片数(片)</td>
          <td colspan="2">{{xianqieList.theoretical}}</td>
        </tr>
        <tr>
          <td width="200">槽轮厂家</td>
          <td width="200">{{xianqieList.caolunManufacturers }}</td>
          <td width="200">槽轮直径(mm)</td>
          <td width="200">{{xianqieList.caolunDiameter }}</td>
          <td width="200">槽轮系数(mm)</td>
          <td width="200">{{xianqieList.caolunCoefficient }}</td>
          <td width="200">槽轮/滑轮使用时间</td>
          <td width="200">{{xianqieList.caolunEmploy }}</td>
        </tr>
        <tr>
          <td>冷却液类型</td>
          <td>{{xianqieList.lengqueyeType }}</td>
          <td>冷却液量(L)</td>
          <td>{{xianqieList.lengqueyeQuantity }}</td>
          <td>消泡剂(ml)</td>
          <td>{{xianqieList.lengqueyeDefoamer }}</td>
          <td>全液刀次</td>
          <td>{{xianqieList.lengqueyeCount }}</td>
        </tr>
        <tr>
          <td>钢线厂家</td>
          <td>{{xianqieList.gangxianManufacturers }}</td>
          <td>钢线直径(mm)</td>
          <td>{{xianqieList.gangxianDiameter }}</td>
          <td>线网长度(mm)</td>
          <td>{{xianqieList.gangxianLength  }}</td>
          <td>新线网使用刀次</td>
          <td>{{xianqieList.gangxianCount }}</td>
        </tr>
        <tr>
          <td width="200">切割开始时间</td>
          <td>{{xianqieList.incisionStartDate }}</td>
          <td width="200">切割结束时间</td>
          <td colspan="2">{{xianqieList.incisionEndDate }}</td>
          <td width="200">每片用线量m/pcs</td>
          <td colspan="2">{{xianqieList.pianyongxianliang }}</td>
        </tr>
        <tr>
          <td>上料员</td>
          <td>{{xianqieList.chargeName  }}</td>
          <td>下料员</td>
          <td colspan="2">{{xianqieList.materialName }}</td>
          <td>每刀用线量km</td>
          <td colspan="2">{{xianqieList.daoyongxianliang }}</td>
        </tr>
        <tr>
          <td width="200">头/尾部甩切厚度(mm)</td>
          <td>{{xianqieList.anomalyThickness }}</td>
          <td width="200">掉/碎片数</td>
          <td>{{xianqieList.anomalySuipian }}</td>
          <td width="200">跳线根数</td>
          <td>{{xianqieList.anomalyTiaoxian }}</td>
          <td width="200">切后剩余线量</td>
          <td>{{xianqieList.anomalyResidue }}</td>
        </tr>
        <tr>
          <td width="220">切割中异常情况描述</td>
          <td colspan="7">{{xianqieList.qiegezhongDescription }}</td>
        </tr>
        <tr>
          <td width="220">切割后异常情况描述</td>
          <td colspan="7">{{xianqieList.qiegehouDescription }}</td>
        </tr>
        <tr>
          <td width="220">备注</td>
          <td colspan="7">{{xianqieList.description }}</td>
        </tr>
      </table>
      <!--脱胶-->
      <table class="jc_table" v-model="tuojiaoList">
        <tr>
          <th rowspan="6" width="100">脱胶</th>
          <td width="200">脱胶机台号</td>
          <td colspan="2">{{tuojiaoList.equipmentNo}}</td>
          <td width="200">上料员/时间</td>
          <td colspan="2">{{tuojiaoList.upFeeder}} {{tuojiaoList.upFeedtime}}</td>
          <td width="200">棒长</td>
          <td>{{tuojiaoList.degumLength}}<span style="float: right">mm</span></td>
        </tr>
        <tr>
          <td>料架号</td>
          <td colspan="2">{{tuojiaoList.shelfNumber}}</td>
          <td>下料员/时间</td>
          <td colspan="2">{{tuojiaoList.downFeeder}} {{tuojiaoList.downFeedtime}}</td>
          <td>下料自损</td>
          <td>{{tuojiaoList.downSelfloss}}<span style="float: right">片</span></td>
      </tr>
        <tr>
          <td>周转箱号</td>
          <td colspan="2">{{tuojiaoList.turnoverNo}}</td>
          <td>导电类型</td>
          <td colspan="2">{{tuojiaoList.conductiveType}}</td>
          <td>厚片</td>
          <td width="400">
            {{tuojiaoList.thickSlice}}
            <!--<span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span>/</span>-->
          </td>
        </tr>
        <tr>
          <td width="200">换水刀次</td>
          <td width="200">{{tuojiaoList.changewaterKnife}}</td>
          <td width="200">气泡</td>
          <td width="200">{{tuojiaoList.bubble}}<span style="float: right">mm</span></td>
          <td width="200">崩损</td>
          <td width="200">{{tuojiaoList.avalancheLoss}}</td>
          <td width="200">线切掉片</td>
          <td width="200">{{tuojiaoList.linecutDroppiece}}<span style="float: right">mm</span></td>
        </tr>
        <tr>
          <td>自检情况</td>
          <td>{{tuojiaoList.selfCheck}}</td>
          <td>色差</td>
          <td>{{tuojiaoList.chromatism}}</td>
          <td>线痕</td>
          <td>{{tuojiaoList.lineMark}}</td>
          <td>线切甩切</td>
          <td>{{tuojiaoList.linecutShed}}<span style="float: right">mm</span></td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="7">{{tuojiaoList.remark}}</td>
        </tr>
      </table>
      <!--插片-->
      <table class="jc_table" v-model="chapianList">
        <tr>
          <th rowspan="3" width="5%">插片</th>
          <td width="10%">插片机号</td>
          <td width="20%">{{chapianList.capianNo }}</td>
          <td width="10%">插片数量(片)</td>
          <td width="20%">{{chapianList.capianCount}}</td>
          <td width="10%">插片员/时间</td>
          <td width="10%">{{chapianList.capianName}} {{chapianList.capianDate}}</td>
        </tr>
        <tr>
          <td width="10%">插片裂片数(片)</td>
          <td>{{chapianList.capianLiepian }}</td>
          <td width="10%">插片碎片数(片)</td>
          <td colspan="4">{{chapianList.capianSuipian }}</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="7">{{chapianList.description }} </td>
        </tr>
      </table>
      <!--清洗-->
      <table class="jc_table" v-model="qingxiList">
          <tr>
            <th rowspan="3" width="5%">清洗</th>
            <td width="10%">清洗机台号</td>
            <td width="20%"> {{qingxiList.rinseNo}}</td>
            <td width="11%">清洗接片数量(片)</td>
            <td width="20%"> {{qingxiList.rinseJiepian}}</td>
            <td width="10%">送验片数(片)</td>
            <td width="20%"> {{qingxiList.songyan}}</td>
          </tr>
          <tr>
            <td >清洗员/时间</td>
            <td>{{qingxiList.rinseName }} {{qingxiList.rinseDate }}</td>
            <td>清洗自损(片)</td>
            <td>{{qingxiList.rinseDamage }}</td>
            <td>累计洗片数(片)</td>
            <td>{{qingxiList.count }}</td>
          </tr>
          <tr>
            <td width="200">备注</td>
            <td colspan="7"> {{qingxiList.description }}</td>
          </tr>
        </table>



       <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
   </el-dialog>


  </div>
</template>
<script>

  import * as Single from "@/api/singleCrystal/singleCrystal";
  import * as Printing from "../../api/report/printing";
  import * as Illustration from "../../api/report/illustration";
  import * as Rinse from "../../api/report/rinse";

  var moment = require('moment');
  export default {
    data() {
      return {
        list: [],
        multipleSelection: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        msg: {},
        dialogVisible: false,
        searchList: {},
        dialogVisible:false,
        id:'',
        lailiaoList:[],
        zhangbangList:{},
        xianqieList:{},
        tuojiaoList:{},
        chapianList:{},
        qingxiList:{},
        startDate:'',
        endDate:''
      }
    },
    methods: {
      fetchData(p) {
        Single.getInfo({pageSize: this.pageSize, pageNum: p}).then(data => {
          this.list = data.rows
          this.total = data.total
        })
      },
      searchRows() {

        var a = '';
        var b = '';

        if( !this.startDate == ''){
          a = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          a = ''
        }
        if(!this.endDate == ''){
          b = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          b = ''
        }

        // a = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        // b = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        var c = this.searchList.input
        // this.fetchData(1,a,b,)
        Single.getInfo({pageSize: this.pageSize, pageNum: 1, date1: a, date2: b, incision_no: c}).then(data => {
          this.list = data.rows
          this.total = data.total
        })

        Single.getCount({date1: a, date2: b, incision_no: c}).then(data => {
          this.msg = data.msg
        })
      },
      handleSelectionChange() {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        //改变分页系统 每页条数时触发
        this.pageSize = val;
        this.currentPage = 1;
        this.fetchData(1);
      },
      changePage(val) {
        //改变 分页系统 当前页数 的时候 触发
        this.currentPage = val
        this.fetchData(val)
      },
      handleInfo(index, row) {
        console.log(index, row)
        this.dialogVisible = true
        this.id= row['单晶编号'];
        Printing.getList_lailiao(this.id).then(data => { //方棒
          if(data.msg !==null) {
            this.lailiaoList = data.msg;
          }
        })

        Printing.getList_zhanbang(this.id).then(data => {//粘棒
          if(data.msg !==null) {
            this.zhangbangList = data.msg;
            //传给接口料座号
            //获得粘树脂信息
            Printing.getList_zhanshuzhi(data.msg.liaozuoNo).then(data => {
              if(data.msg !==null) {
                this.zhangbangList.resinName= data.msg.name;
                this.zhangbangList.resinDate= data.msg.glueResinDate;
                this.zhangbangList.colour= data.msg.colour;
                this.zhangbangList.manufacturers= data.msg.manufacturers;

              }
            })

          }

        })
        Printing.getList_xianqie(this.id).then(data => { //线切
          if(data.msg !==null) {
            this.xianqieList = data.msg;
          }
        })
        Printing.getList_tuojiao(this.id).then(data => { //脱胶
          if(data.msg !==null) {
            this.tuojiaoList = data.msg;
          }
        })
        Illustration.getList_chapian(this.id).then(data => { //插片
          if(data.msg !==null) {
            this.chapianList = data.msg;
          }
        })
        Rinse.getList_qingxi(this.id).then(data => { //清洗
          if(data.msg !==null) {
            this.qingxiList = data.msg;
          }
        })
      },
      loadInfoCount() {
        Single.getCount().then(data => {
          this.msg = data.msg
        })
      },
      infoShowCancel() {
        this.dialogVisible = false
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight) - 40
        return tableHeight;
      }
    },
    created() {
      // this.fetchData(1);
      // this.loadInfoCount();
    },
    mounted () {
      this.startDate = moment.utc(moment().subtract(1, 'days').format('YYYY-MM-DD 00:30:00')).format();
      this.endDate = moment.utc(moment().format('YYYY-MM-DD 00:30:00')).format();
      this.searchRows();
    }
  }
</script>
<style >
  .top_table {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px;
  }

  .top_table .t_title {
    background: #E4EDF2;
  }

  .top_table .t_title,
  .top_table .content {
    display: flex;
    border: 1px solid #dfe6ec;
    height: 34px;
  }

  .top_table .t_title > div,
  .top_table .content > div {
    flex: 1;
    border-right: 1px solid #dfe6ec;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
  }

  .top_table .t_title > div:last-child,
  .top_table .content > div:last-child {
    border-right: none;
  }

  .top_table .content {
    border-top: none;
  }

  .el-dialog--small{
    width: 1200px;
  }
</style>
